<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-添加新预约</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
</head>
<style>
/* ::-webkit-scrollbar-thumb {
  background:rgb(95,106,135); 
  border-radius: 10px;
  height:50%;
} */
body,html{
	height: auto; 
}
.date-input {
    padding-left: 30px;
    background: url(/images/icon/rili_icon.png) no-repeat 10px center !important;
}
.layui-form-label{
    width:auto;
	padding:9px 4px;
	text-align:right;
}
</style>
<body>
	<div class="nav-section-content-container" style="padding: 0px">
		<header class="nav-header">
			<div class="nav-section-header-title">
				<span>添加新预约</span>
			</div>
		</header>
		<div class="nav-section-content-container">
			<div class="m-updown">
				<div class="nav-section-action-bar" style="height: 600px;">
					<div class="layui-form-item layui-form"">
						<div class="layui-inline">
						    <div class="layui-input-inline" style="width:130px">
						      	<input type="text" name="bookDate" id="bookDate" lay-verify="bookDate" placeholder="" autocomplete="off" class="layui-input">
						    </div>
						</div>
						<div class="layui-inline">
						    <label class="layui-form-label">开始时间</label>
						    <div class="layui-input-block"  style="width:100px;margin-left:85px;">
							    <select id="startTime">
							        <option value="8:00">08:00</option>
							        <option value="8:30">08:30</option>
							        <option value="9:00">09:00</option>
							        <option value="9:30">09:30</option>
							        <option value="10:00">10:00</option>
							        <option value="10:30">10:30</option>
							        <option value="11:00">11:00</option>
							        <option value="11:30">11:30</option>
							        <option value="12:00">12:00</option>
							        <option value="12:30">12:30</option>
							        <option value="13:00">13:00</option>
							        <option value="13:30">13:30</option>
							        <option value="14:00">14:00</option>
							        <option value="14:30">14:30</option>
							        <option value="15:00">15:00</option>
							        <option value="15:30">15:30</option>
							        <option value="16:00">16:00</option>
							        <option value="16:30">16:30</option>
							        <option value="17:00">17:00</option>
							        <option value="17:30">17:30</option>
							        <option value="18:00">18:00</option>
							        <option value="18:30">18:30</option>
							        <option value="19:00">19:00</option>
							        <option value="19:30">19:30</option>
							        <option value="20:00">20:00</option>
							        <option value="20:30">20:30</option>
							        <option value="21:00">21:00</option>
							        <option value="21:30">21:30</option>
							        <option value="22:00">22:00</option>
							        <option value="22:30">22:30</option>
							        <option value="23:00">23:00</option>
							        <option value="23:30">23:30</option>
							        <option value="24:00">24:00</option>
							    </select>
							</div>
						</div>
						<div class="layui-inline">
						    <label class="layui-form-label">结束时间</label>
						    <div class="layui-input-block"  style="width:100px;margin-left:85px;">
							    <select id="endTime">
							        <option value="8:00">08:00</option>
							        <option value="8:30">08:30</option>
							        <option value="9:00">09:00</option>
							        <option value="9:30">09:30</option>
							        <option value="10:00">10:00</option>
							        <option value="10:30">10:30</option>
							        <option value="11:00">11:00</option>
							        <option value="11:30">11:30</option>
							        <option value="12:00">12:00</option>
							        <option value="12:30">12:30</option>
							        <option value="13:00">13:00</option>
							        <option value="13:30">13:30</option>
							        <option value="14:00">14:00</option>
							        <option value="14:30">14:30</option>
							        <option value="15:00">15:00</option>
							        <option value="15:30">15:30</option>
							        <option value="16:00">16:00</option>
							        <option value="16:30">16:30</option>
							        <option value="17:00">17:00</option>
							        <option value="17:30">17:30</option>
							        <option value="18:00">18:00</option>
							        <option value="18:30">18:30</option>
							        <option value="19:00">19:00</option>
							        <option value="19:30">19:30</option>
							        <option value="20:00">20:00</option>
							        <option value="20:30">20:30</option>
							        <option value="21:00">21:00</option>
							        <option value="21:30">21:30</option>
							        <option value="22:00">22:00</option>
							        <option value="22:30">22:30</option>
							        <option value="23:00">23:00</option>
							        <option value="23:30">23:30</option>
							        <option value="24:00">24:00</option>
							    </select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="f-left">
								<label class="layui-form-label">容纳人数</label>
							</div>
							<div class="kb-number-input f-left">
								<div class="counterBox">
									<span class="subtracter">-</span><input type="number" id="number" value="4"><span class="summator">+</span>
								</div>
							</div>	
							&nbsp;&nbsp;<a class="layui-btn layui-btn-radius layui-btn-normal" id="sel">搜索</a>
						</div>
					</div>
					<!-- <div class="clear-criteria">
						<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger show" id="clear-btn"><i class="layui-icon">ဆ</i>清除所有选项</button>
					</div> -->
					<table class="layui-hide" id="LAY_table_field" lay-filter="field"></table> 
					<script type="text/html" id="caozuo">
  						<a class="layui-btn layui-btn-normal btn-bg" lay-event="order" onclick=addOrder("{{d.id}}")>预约</a>
					</script>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
$(function(){
	var table;
	setHeight();
	getDate();
	var bookDate=$("#bookDate").val();
	var startTime=$("#startTime").val();
	var endTime=$("#endTime").val();
	var number=$("#number").val();
	layui.use(['element','layer','form','table', 'laydate'], function(){
		var form = layui.form,laydate = layui.laydate;
		table = layui.table;
		//日期
		laydate.render({
		  elem: '#bookDate'
		});
		//方法级渲染
		table.render({
			id:'field',
		    elem: '#LAY_table_field',
		    url: '/app/projectField/listdata',
		    cols: [[
		      {field:'name', align:'left', title: '会议室名称',width:'30%'}
		      ,{field:'peopleNumber', align:'left', title: '可容纳人数',width:'20%'}
		      ,{field:'checkPrice', align:'center', title: '元/小时',width:'26%'}
		      ,{field: 'caozuo', align:'center',title: '操作',toolbar: '#caozuo',width:'20%'}
		    ]]
		    ,page: true
		    ,where: {
	        	params:{
	        		bookDate: bookDate,
	        		startTime: startTime,
	        		endTime: endTime,
	        		number: number
	        	}
	        }
		});
	})
	//数值的加减按钮
	$(".layui-form .counterBox").on("click","span",function(){
		var val=$("#number").val(),index=$(this).index();
		if(index==2){
			val++
		}else{
			val<=0? val=0:val--;
		}
		$("#number").val(val)
	})
	$("#sel").on("click",function(){
		var bookDate=$("#bookDate").val();
		var startTime=$("#startTime").val();
		var endTime=$("#endTime").val();
		var number=$("#number").val();
		table.reload('field', {
	        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	params:{
			        	bookDate: bookDate,
		        		startTime: startTime,
		        		endTime: endTime,
		        		number: number
		        	}
		        }
	    });
		
	})
	
})
function addOrder(id){
	var projectId=parent.parent.$("#projectId").val();
	parent.parent.parent.layer.open({
		  type: 2, 
		  title:"预约 场地",
		  area: ['700px','500px'],
	      shade: [0.6, '#010101'],
	      zIndex:800,
		  content:"/app/projectFieldTeam/add/"+projectId+"_"+id , 
		  end: function () {
			  //getFieldList();
	      }
	});
	
}
function getDate(){
	var myDate = new Date();
	//获取当前年
	var year=myDate.getFullYear();
	//获取当前月
	var month=myDate.getMonth()+1;
	//获取当前日
	var date=myDate.getDate(),
	hours = myDate.getHours(), //截取小时 
	minutes = myDate.getMinutes(), //截取分钟
	now=year+'-'+p(month)+"-"+p(date);
	$("#bookDate").val(now);
	var half="00",endH=hours+1;//初始化时间下拉
	endH>23?endH=24:endH=endH;
	if(minutes>30){
		half="00";
		$("#startTime").val(endH+":"+half);
		$("#endTime").val((endH+1)+":"+half);
	}else{
		half="30";
		$("#startTime").val(hours+":"+half);
		$("#endTime").val(endH+":"+half);
	}
	
}

function setHeight(){
    var h = document.body.clientHeight;
    console.log(h)
    window.parent.setiframeWrap(h);
}
function p(s) {
    return s < 10 ? '0' + s: s;
}
</script>
</html>